<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul{
      display: flex;
    }
    li{
      
      list-style: none;
      margin: 15px;
      cursor: pointer;
    }
    .active{
      border:1px solid red;
    }
   
  </style>
</head>
<body>
<h1>
  key 唯一标识符,具有唯一性,可以提升性能
  内部有算法比较,根据key的唯一值 只要有一个数据更新,那他就会根据这儿唯一值进行查找,找到后就更该这一项的值,如果不加key 就会重新渲染一遍
</h1>
  <div id="root">
    <button v-show="index > 0" @click="index--" >上一张</button>
    <button v-show="index < list.length-1" @click="index++">下一张</button>
   <ul>
    <li :class="index==i ? 'active' : '' " v-for="(item, i) in list" :key="item" @click="fn(i,$event)" >
      <img width="60px" :src="item"  alt="">
    </li>
   </ul>
   <img width="200px"  :src="list[index]" alt="">
  </div>
  <script src="../js/vue.js"></script>

  <script>
   const app = new Vue({
      el:'#root',
      data:{
        // url:'',
        list:[
          './imgs/10-01.png',
          './imgs/10-02.png',
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ],
        index:0
      },
      
      methods: {
        fn(index,e){
          // this.url = item
          console.log(e)
          
          this.index = index
      
        },
      
      },
      
    })
    // setInterval(()=>{
    //   app.index++
  
    // },1000)
  </script>
</body>
</html>